<template>
  <div id="Actress">
    <div class="Actress-flex">
      <div class="Actress-img">
        <img :src="list.avatars.small" alt="图片加载失败" />
      </div>
      <div class="Actress-content">
        <p>名字:{{list.name}}</p>
        <p>性别:{{list.gender}}</p>
        <p>职业:{{list.works[0].roles[0]}}</p>
        <p>
          作品:
          <span
            v-for="(item,index) in list.works"
            :key="index"
          >{{item.subject.title}}&nbsp;&nbsp;</span>
        </p>
        <p>生日:{{list.birthday}}</p>
        <p>家乡:{{list.born_place}}</p>
      </div>
    </div>
    <div class="summary">
      <p class="name">简介</p>
      <p class="summary-content">{{list.summary}}</p>
    </div>

    <div class="Relevant">
      <p>相关人物</p>
      <div class="Relevant-flex" v-for="(rele,index) in list.works" :key="index">
        <router-link
          :to="`/news:${cast.id}`"
          tag="div"
          class="Router"
          v-for="(cast,index) in rele.subject.casts"
          :key="index"
        >
          <div class="Relevant-img">
            <img :src="cast.avatars.small" alt="图片加载失败" />
          </div>
          <div class="Relevant-name">{{cast.name}}</div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      msg: "Hello actress",
      count: 10,
      start: 0
    };
  },
  methods: {
    request() {
      var urlId = this.$route.params.id.replace(":", "");
      var url =
        "https://api.douban.com/v2/movie/celebrity/" +
        urlId +
        "?apikey=0df993c66c0c636e29ecbb5344252a4a&start=" +
        this.start +
        "&count=" +
        this.count +
        "&tdsourcetag=s_pcqq_aiomsg&qq-pf-to=pcqq.c2c";
      console.log(url);

      this.$http.jsonp(url).then(res => {
        this.list = res.body;
      });
    }
  },
  mounted() {
    // var datas = this.$store.state.Actress;
    // if (datas.length > 0) {
    //   this.list = this.$store.state.Actress;
    // } else {
    this.request();
    // }
  }
};
</script>

<style>
</style>